<template>
  <div class="app">
      <CateGory title="美食" >
          <img :src="foodUrl" alt="">
      </CateGory>

      <CateGory title="游戏" >
          <ul>
              <li v-for="item in gameArr">{{item}}</li>
          </ul>
      </CateGory>

      <CateGory title="电影" >
          <video :src="movieUrl" controls></video>
      </CateGory>
  </div>
</template>

<script>
    import CateGory from './components/CateGory.vue'
    export default {
        name:'App',
        components:{CateGory},
        data(){
            return {
                foodUrl:'https://s3.ax1x.com/2021/01/16/srJlq0.jpg',
				gameArr:['英雄联盟手游','劲舞团','红色警戒'],
				movieUrl:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
            }
        }
    }
</script>

<style>
    .app{
        display: flex;
        justify-content: space-around;
    }
    img,video{
        width: 100%;
    }
</style>